<template>
  <div class="setting">
    <div class="container-fluid pt-2 pb-3 fixed-top bg-white">
      <div class="d-flex justify-content-end">
        <div class="input-group col-4">
          <input
            type="text"
            class="form-control"
            v-model="search.keyword"
            @keydown.enter="searchCmd"
          />
          <div class="input-group-append">
            <button class="btn btn-sm btn-success" @click="searchCmd">
              搜索
            </button>
          </div>
        </div>
        <button class="btn btn-sm btn-warning ml-2" @click="getCmds">
          刷新
        </button>
        <button class="btn btn-sm btn-primary ml-2" @click="openTagModal">
          新建标签
        </button>
        <button class="btn btn-sm btn-primary ml-2" @click="openCmdModal">
          新建cmd
        </button>
      </div>
      <ul class="nav nav-tabs">
        <li
          class="nav-item"
          @click="changeTab(item.id)"
          v-for="item in tabs"
          :key="item.id"
        >
          <a
            class="nav-link"
            :class="{ active: tabIndex == item.id }"
            href="javascript:;"
            >{{ item.title }}</a
          >
        </li>
      </ul>
    </div>

    <div class="container-fluid">
      <table class="table table-bordered table-sm" v-if="tabIndex == 1">
        <thead class="table-primary">
          <tr>
            <th>序号</th>
            <th>命令名称</th>
            <th>分类</th>
            <th>路径</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody v-if="cmds && cmds.length > 0">
          <tr v-for="(item, index) in cmds" :key="index">
            <th scope="row">{{ index + 1 }}</th>
            <td>{{ item.title }}</td>
            <th>{{ item.tag.title }}</th>
            <td>{{ item.path }}</td>
            <td>
              <div class="btn-group">
                <button
                  class="btn btn-sm btn-success ml-2"
                  @click="handleUpdateCmd(item)"
                >
                  编辑
                </button>
                <button
                  class="btn btn-sm btn-danger ml-2"
                  @click="remove(item.id)"
                >
                  删除
                </button>
              </div>
            </td>
          </tr>
        </tbody>
        <div class="mt-5 mb-5 text-center" v-else>
          <p>暂无数据，请添加。</p>
        </div>
      </table>
      <table class="table table-bordered table-sm" v-if="tabIndex == 0">
        <thead class="table-primary">
          <tr>
            <th>序号</th>

            <th>标签名称</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody v-if="tags && tags.length > 0">
          <tr v-for="(item, index) in tags" :key="index">
            <th scope="row">{{ index + 1 }}</th>
            <td>{{ item.title }}</td>
            <td>
              <div class="btn-group">
                <button
                  class="btn btn-sm btn-danger"
                  @click="removeTag(item.id)"
                >
                  删除
                </button>
              </div>
            </td>
          </tr>
        </tbody>
        <div class="mt-5 mb-5 text-center" v-else>
          <p>暂无数据，请添加。</p>
        </div>
      </table>
    </div>
    <cmd-modal ref="cmd" @confirm="getCmds"></cmd-modal>
    <tag-modal ref="tag" @confirm="getTags"></tag-modal>
  </div>
</template>

<script>
import cmd from "node-cmd";
import { mapGetters } from "vuex";
import { getCmds, removeCmd, getMatchCmds } from "@/utils/cmd";
import { removeTag, getTags } from "@/utils/tag";
import CmdModal from "@/components/cmdModal.vue";
import TagModal from "@/components/tagModal.vue";
export default {
  components: {
    CmdModal,
    TagModal,
  },
  data() {
    return {
      search: {
        keyword: "",
      },
      tabIndex: 1,
      tabs: [
        {
          id: 0,
          title: "标签",
        },
        {
          id: 1,
          title: "命令",
        },
      ],
    };
  },
  computed: {
    ...mapGetters("cmd", ["cmds"]),
    ...mapGetters("app", ["tags"]),
  },
  filters: {
    tag() {
      // let matchs = this.tags.filters(item=>item.value==val);
      // return matchs[0].title
    },
  },
  created() {
    this.getCmds();
    this.getTags();
  },
  methods: {
    changeTab(id) {
      this.tabIndex = id;
    },

    async getCmds() {
      let res = await getCmds({ sortBy: "title", page: 1, size: 10 });
      this.$store.dispatch("cmd/setCmds", res);
    },
    async getTags() {
      let res = await getTags({ sortBy: "title", page: 1, size: 10 });
      this.$store.dispatch("app/setTags", res);
    },
    openCmdModal() {
      this.$refs.cmd.openModal();
    },
    openTagModal() {
      this.$refs.tag.openModal();
    },
    /**
     * 运行命令
     */
    run(path) {
      cmd.run(`start ${path}`);
    },
    /**
     * 删除命令
     */
    async remove(id) {
      await removeCmd({ id });
      this.$toast.success("删除成功");
      this.getCmds();
    },
    handleUpdateCmd(item) {
      this.$refs.cmd.openModal();
      this.$refs.cmd.isEdit = true;
      this.$refs.cmd.id = item.id;
      this.$refs.cmd.getCmd();
    },
    async searchCmd() {
      let res = await getMatchCmds(
        { page: 1, size: 10 },
        { title: this.search.keyword }
      );
      this.$store.dispatch("cmd/setCmds", res);
    },
    async removeTag(id) {
      await removeTag({ id });
      this.$toast.success("删除成功");
      this.getTags();
      // await
    },
  },
};
</script>
